import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
  Animated,
} from 'react-native';

const Searcher = () => {
  const [isTyping, setIsTyping] = useState(false);
  const [displayText, setDisplayText] = useState('');
  const [buttonDisabled, setButtonDisabled] = useState(false);
  const textOpacity = useRef(new Animated.Value(0)).current;

  const longText = "这是一段很长的文本，将使用打字机效果逐字显示。这个效果是通过React Native的Animated API实现的，每个字符都会以动画的形式显示出来。";

  const startTyping = () => {
    setButtonDisabled(true);
    setIsTyping(true);
    setDisplayText('');
    
    let currentIndex = 0;
    const interval = setInterval(() => {
      if (currentIndex < longText.length) {
        setDisplayText(prev => prev + longText[currentIndex]);
        currentIndex++;
      } else {
        clearInterval(interval);
        setIsTyping(false);
        setButtonDisabled(false);
      }
    }, 100);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.button, buttonDisabled && styles.buttonDisabled]}
        onPress={startTyping}
        disabled={buttonDisabled}
      >
        {isTyping ? (
          <ActivityIndicator color="#fff" />
        ) : (
          <Text style={styles.buttonText}>开始打字</Text>
        )}
      </TouchableOpacity>
      
      <View style={styles.textContainer}>
        <Text style={styles.text}>{displayText}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 8,
    minWidth: 120,
    alignItems: 'center',
  },
  buttonDisabled: {
    backgroundColor: '#999',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  textContainer: {
    marginTop: 20,
    padding: 15,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    width: '100%',
  },
  text: {
    fontSize: 16,
    lineHeight: 24,
  },
});

export default Searcher;
